<!-- 范本编辑/新增/查看 -->
<template>
    <div class="model-change-box">
        <el-breadcrumb separator="/" class="bread-title">
			<el-breadcrumb-item :to="{ path: '/contractModelManage' }">范本管理</el-breadcrumb-item>
			<el-breadcrumb-item>{{pageType}}</el-breadcrumb-item>
		</el-breadcrumb>
         <p class="type-item-title">基本信息</p>
        <el-form :rules="rules" ref="typeForm"  :model="typeForm" label-width="180px"  style="max-width:650px">
			<el-form-item label="范本名称：" prop="templateName">
			  	 <el-input v-model.trim="typeForm.templateName" v-if="typeStatus !='view'"></el-input>
                <span v-else>{{typeForm.templateName}}</span>
			</el-form-item>
    	    <el-form-item label="合同类型：" prop="contractType">
			  	 <el-select  v-if="typeStatus !='view'" v-model="typeForm.contractType" placeholder="请选择合同类型" >
                    <el-option v-for="(type,index) in typOptions" :key="index" :label="type.name" :value="type.code"> </el-option>
                </el-select>
                <span v-else>{{typeForm.contractTypeName}}</span>
			</el-form-item>
            <el-form-item label="备注：" prop="remarks">
			  	 <el-input  type="textarea"
                            :rows="6"
                            placeholder="合同描述"
                            v-if="typeStatus !='view'"
                            v-model="typeForm.remarks">
                </el-input>
                <span v-else>{{typeForm.remarks}}</span>
			</el-form-item>
            <el-form-item label="附件：" class="posterurl">
                <template v-if="typeStatus !='view'">
                    <upload-word
                    ref="file"
                    :name='typeForm.templateEnclosureName'
                    :url ='typeForm.templateEnclosure'
                    @uploadSuccess='uploadSuccess'>
                    </upload-word>
                    <div>支持扩展名：.doc .docx</div>
                </template>
               <div class="doc-link" v-else>
                   <a :href="typeForm.templateEnclosure">{{typeForm.templateEnclosureName || ''}}</a>
                   <a @click="viewEdit" v-show="showViewPDF">预览</a>
               </div>
			</el-form-item>

			<el-form-item style="text-align:center" v-if="typeStatus !='view'">
				<el-button type="primary"  @click="$refs.file.uploadQiniu()">保存</el-button>
                <el-button type="primary"  @click="back">取消</el-button>
			</el-form-item>
		</el-form>
        <!-- 操作记录 -->
        <audit-table :tableData='historyTableData'  v-if="typeStatus =='view'"></audit-table>
        <p class="back-btn"  v-if="typeStatus =='view'">
            <el-button type="primary"  @click="back">关闭</el-button>
        </p>

    </div>

</template>

<script>
import api from '@/api/apiPath'
import uploadWord from './uploadWord'
import auditTable from '../common/auditTable' //审核记录表

export default {
    name: 'contractModelManage',
    title: '范本管理',
	components: {uploadWord, 'audit-table':auditTable,},
	data () {
		return {
            typOptions:[],
            typeForm:{},
            typeStatus:"",
            pageType:"",

            typeFunction:{
                add:()=>{
                    this.pageType = "新增";
                },
                edit:(id)=>{
                    this.pageType = "编辑";
                    this.loadDetail(id);
                },
                view:(id)=>{
                    this.pageType = "详情";
                    this.loadDetail(id);
                }
            },
            historyTableData:[],//详情视图历史记录

            rules:{
                templateName:[
                    {
                        required: true,
                        trigger: ['change','blur'],
                        validator: (rule, value, callback) => {
                            if (!value) {
                                    return callback(new Error('请输入范本名称'));
                            }
                            if(value.length>50){
                                    return callback(new Error('范本名称长度不能大于50'));
                            }
                            callback();
                        }
                    }
                ],
                contractType:[
                    {required: true,message: '请选择合同类型', trigger: 'change'}
                ],
                remarks:{
                        required: false,
                        trigger: 'change',
                        validator: (rule, value, callback) => {
                            if (!value) {
                                    return callback();
                            }
                            if(value.length>100){
                                    return callback(new Error('备注长度不能大于100'));
                            }
                            callback();
                        }
                },
            }
        }
    },
    methods:{
        save(){
            let {id,templateName,contractType,remarks,templateEnclosureName,templateEnclosure} = this.typeForm;
            let params = {
                id:id,
                templateName:templateName,
                contractType:contractType,
                remarks:remarks,
                templateEnclosureName:templateEnclosureName,//附件名称
                templateEnclosure:templateEnclosure,//附件地址
            };

            this.$refs.typeForm.validate((valid)=>{
                if(!valid){
                    return
                }
                if(!templateEnclosure){
                    this.$alert("请上传附件", '提示', {
                            type: 'error',
                            confirmButtonText: '确定',
                            callback: action => {
                                }
                    });
                    return
                }


                this.axios.post(api.EDITTEMPLATELIST,params).then((res)=>{
                    if(res.data.code==200){
                        this.$alert("保存成功", '提示', {
                                type: 'success',
                                confirmButtonText: '确定',
                                callback: action => {
                                        this.$router.push({path:"/contractModelManage"})
                                    }
                        });
                    }
                }).catch((error)=>{
                        console.log(error)
                })
            })

        },
        showViewPDF(){
                let url = this.typeForm.templateEnclosure;
                if(url.substring(url.lastIndexOf('.') + 1, url.length) == 'pdf'){
                    return true;
                }else{
                    return false;
                }
        },
        back(){
             this.$router.push({path: '/contractModelManage'})
        },
        //上传成功,
        uploadSuccess({fileName,fileUrl} = {}){
            this.typeForm.templateEnclosureName = fileName;
            this.typeForm.templateEnclosure = fileUrl;
            this.save();
        },

        //加载范本详情
        loadDetail(id){
            this.axios.get(`${api.GETTEMPLATEDETAIL}?id=${id}`).then(res => {
                if (res.data.code == 200) {
                    this.typeForm = res.data.data;
                    this.historyTableData = res.data.data.operationList;
                }
            })
        },
        //预览
        viewEdit(){
            this.$alert("暂不支持预览word文档", '提示', {

                confirmButtonText: '确定',
                callback: action => {
                }
            });
        }
	},
	created () {
       let {pageType,id,typOptions} = this.$route.query;
       this.typeStatus = pageType;
       this.typOptions = typOptions;
       this.typeFunction[pageType](id);
    },
	destroyed() {

	},
    filters: {

	}
}

</script>

<style lang="stylus">
.model-change-box{
    .type-item-title{
      font-size:18px;
      color:#303133;
      font-weight :700;
  }
  .back-btn{
      padding:30px 0;
      text-align :center;
  }
  .doc-link{
        a{
            color: #409eff;
            text-decoration: none;
            margin-right:10px;
        }
    }

}
  .posterurl .el-form-item__label:before{
        content: '*';
        color: #f56c6c;
        margin-right: 4px;
    }

</style>
